import {
  useMemoizedFn,
  useRequest,
  useTitle,
  useSafeState,
  useBoolean,
} from 'ahooks';
import { useEffect } from 'react';
import { request } from 'umi';

const prefix = 'https://www.bestlyg.com/api/luckydog';
interface API<T> {
  success: boolean;
  data: T;
}
interface Reward {
  max: number;
  name: string;
  reward: string;
  set: boolean;
  users: string[];
}
const links = [
  {
    name: '一等奖',
    tag: '0361',
  },
  {
    name: '二等奖1',
    tag: 'ff42',
  },
  {
    name: '二等奖2',
    tag: 'a048',
  },
  {
    name: '三等奖1',
    tag: 'd75c',
  },
  {
    name: '三等奖2',
    tag: 'ee98',
  },
  {
    name: '三等奖3',
    tag: '20a1',
  },
  {
    name: '阳光普照奖1',
    tag: '0755',
  },
  {
    name: '阳光普照奖2',
    tag: '1cef',
  },
];
export default function Info() {
  useTitle('抽奖信息展示');
  const { data, refresh } = useRequest(
    () =>
      request<API<Record<string, Reward>>>(`${prefix}/data`).then(
        (res) => res.data,
      ),
    { pollingInterval: 2000 },
  );
  const reset = useMemoizedFn(() => {
    request<API<Record<string, Reward>>>(`${prefix}/reset`).then(refresh);
  });
  const [input, setInput] = useSafeState('');
  const [visible, { setTrue }] = useBoolean(!false);
  useEffect(() => {
    if (input === '6909') setTrue();
  }, [input]);
  return (
    <div
      style={{
        width: '100vw',
        height: '100vh',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      {visible ? (
        <div
          style={{
            width: '400px',
          }}
        >
          {/* <div>
            <button onClick={refresh}>刷新</button>
            <button onClick={reset}>重置</button>
          </div> */}
          <div style={{ marginTop: 10 }}>
            {links.map(({ name, tag }, i) => (
              <a
                style={{ marginLeft: 10, marginTop: 10 }}
                key={i}
                href={window.location.href.replace('info', tag)}
                target="_blank"
              >
                {name}
              </a>
            ))}
          </div>
          {Object.values(data ?? {}).map((reward, i) => (
            <div key={i}>
              <div>===================================</div>
              <div>名称:{reward.name}</div>
              <div>名额:{reward.max}</div>
              <div>奖品:{reward.reward}</div>
              <div>获奖人:{reward.users.join(',')}</div>
            </div>
          ))}
        </div>
      ) : (
        <div style={{ marginTop: 20 }}>
          密码：
          <input
            style={{ height: 30 }}
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
        </div>
      )}
    </div>
  );
}
